<template>
  <Nav_bar :title="'补货管理'" />
  <div class="box">
    <div class="device_info">
      <div class="device_name">{{ machineInfoStore.machineInfo?.machineName }}</div>
      <div class="device_xinxi">库存数量：{{ machineInfoStore.machineInfo?.inventory }}</div>
      <div class="device_xinxi">点位：{{ machineInfoStore.machineInfo?.positionName }}</div>
      <div class="device_xinxi">
        状态：{{
          machineInfoStore.machineInfo?.operationStatus === 1
            ? '营业中'
            : machineInfoStore.machineInfo?.operationStatus === 2
              ? '休息中'
              : machineInfoStore.machineInfo?.operationStatus === 3
                ? '故障中'
                : ''
        }}
      </div>
    </div>
    <div class="skip_button">
      <button
        type="button"
        class="_button"
        v-for="item in skipButtonList"
        @click="
          $router.push({
            path: item.to,
            query: {
              activeIndex: item.activeIndex,
              machineType: $route.query.machineType,
            },
          })
        "
        :key="item.name"
      >
        {{ item.name }}
      </button>
    </div>
    <tableBox
      v-if="dataList?.length"
      ref="tableBoxRef"
      @articleData="articleData"
      v-model:dataList="dataList"
      :machineType="$route.query.machineType"
    />
    <Null_data v-else />
  </div>
  <Tabbar />
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getRoadInfoApi, putRoadInfoApi } from '@/api/machine/machine'
import tableBox from './components/tableBox.vue'

import popupBox from './components/popupBox.vue'
import { Msg } from '@/utils/tools'
import { useMachineInfoStore } from '@/stores'
const $route = useRoute()
const $router = useRouter()
const machineInfoStore = useMachineInfoStore()
const dataList = ref([])
const tableBoxRef = ref(null)
const skipButtonList = [
  {
    name: '报损',
    to: `/replenishment-details`,
    activeIndex: 0,
  },
  {
    name: '同步计划',
    to: `/replenishment-details`,
    activeIndex: 1,
  },
  {
    name: '修改库存',
    to: `/replenishment-details`,
    activeIndex: 2,
  },
]
console.log($route.query)
/**获取设备库存 */
const getRoadInfo = async () => {
  const res = await getRoadInfoApi({ machineId: machineInfoStore.machineInfo?.machineId })
  dataList.value = res.data
}

/** 点击多选的时候调用子组件的清除方法 */
const articleData = () => {
  tableBoxRef.value.closeBoolean()
}

getRoadInfo()
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: calc(100% - 44px);
  background-color: var(--defaultBgc);
  padding: 14px 0 102px 0;
}
.device_info {
  width: 347px;
  height: 105px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
  padding: 9px 0 0 13px;
  .device_name {
    font-size: 12px;
    color: #000;
  }
  .device_xinxi {
    font-size: 10px;
    color: #999;
    margin-top: 9px;
  }
}
.skip_button {
  width: 347px;
  height: 43px;
  display: flex;
  align-items: center;
  ._button {
    height: 20px;
    line-height: 20px;
    padding: 0 15px;
    border-radius: 35px;
    background-color: #46d9ae;
    color: #fff;
    font-size: 12px;
    margin-right: 12px;
  }
}
._submit {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 63px;
  .button_close,
  .button_submit {
    width: 91px;
    height: 30px;
    border-radius: 36px;
    font-size: 12px;
  }
  .button_close {
    color: #666;
    border: 1px solid #999;
  }
  .button_submit {
    color: #fff;
    background: #5ed0ae;
  }
}
.van-nav-bar {
  height: 44px;
  line-height: 44px;
  padding: 0 9px 0 5px;
  background-color: #5ed1ae;
  .van-nav-bar__content {
    height: 44px;
    line-height: 44px;
    .van-nav-bar__title {
      color: #fff;
      font-weight: 400;
      font-size: var(--fs18);
    }
  }
}
</style>
